<template>
  <div style="margin-bottom:6px;">
    <el-row style="height: 216px;border-radius: 16px;float: left;" class="item-container">

      <el-row style="float: left; display: flex; width: 100%;">
        <el-col style="flex: 1; height: 72px; padding: 16px 20px; color: #ffffff;">
          <el-row style="text-align: revert; height: 24px">
            路由器
          </el-row>
          <el-row style="text-align: revert; height: 12px; font-size: 12px; color: #c0c0c0;">
            路由器实时监控
          </el-row>
        </el-col>
        <el-col style="width: 100px; height: 72px;justify-content: right">
          <el-row style="justify-content: right;width: 100%;display: flex;">
            <el-tag type="success" style="border-radius: 0 16px 0 16px;">在线</el-tag>
            <!--          <el-tag type="danger" style="border-radius: 0 16px 0 16px;">离线</el-tag>-->
          </el-row>
          <el-row>
            <el-button type="primary" icon="el-icon-monitor" circle size="mini" @click="openPage()"></el-button>
            <el-button type="danger" icon="el-icon-refresh-right" circle size="mini" @click="refreshDate()"></el-button>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="height: 144px;width: 100%;display: flex">

        <div style="height: 144px;width: 400px;margin-left: 20px;">
          <el-row style="color: #ffffff;justify-content: center;text-align: center;display: flex;margin: 8px 0;width: 100%">
            <el-col style="width: 36px;justify-content: center;text-align: center;font-size: 12px" >CPU</el-col>
            <el-col style="flex: 1">
              <el-progress :percentage=20 :stroke-width=1 color="#2080F0" text-color="#fff"></el-progress>
            </el-col>
            <el-col style="width: 36px;justify-content: center;text-align: center;font-size: 12px" >RAM</el-col>
            <el-col style="flex: 1">
              <el-progress :percentage=60 :stroke-width=1 color="#18A058"  text-color="#fff"></el-progress>
            </el-col>
          </el-row>

          <el-row style="color: #0E0E0E">
            <el-col style="width: 33%;justify-content: center;text-align: center;" >
              <el-tag style="width: 90%;">↑230Mbps</el-tag>
            </el-col>
            <el-col style="width: 33%;justify-content: center;text-align: center;" >
              <el-tag style="width: 90%;" type="success" >↓230Mbps</el-tag>
            </el-col>
            <el-col style="width: 33%;justify-content: center;text-align: center;" >
              <el-tag style="width: 90%;" type="success" >230 connect</el-tag>
            </el-col>
          </el-row>

          <el-row style="background: #00000000;justify-content: center;text-align: center;display: flex;margin: 8px 0;width: 100%">
            <table style="border-collapse: collapse; border: 1px solid #409EFF; color: #FFFFFF; font-size: 12px; width: 100%;">
              <tr> <!-- 第一行 -->
                <th style="border: 1px solid #409EFF; padding: 4px; text-align: center;">2.4G</th>
                <th style="border: 1px solid #409EFF; padding: 4px; text-align: center;">5G</th>
                <th style="border: 1px solid #409EFF; padding: 4px; text-align: center;">Rj45</th>
                <th style="border: 1px solid #409EFF; padding: 4px; text-align: center;">Sum</th>
              </tr>
              <tr> <!-- 第二行 -->
                <td style="border: 1px solid #409EFF; padding: 4px; text-align: center;">3</td>
                <td style="border: 1px solid #409EFF; padding: 4px; text-align: center;">2</td>
                <td style="border: 1px solid #409EFF; padding: 4px; text-align: center;">3</td>
                <td style="border: 1px solid #409EFF; padding: 4px; text-align: center;">8</td>
              </tr>
            </table>
          </el-row>
        </div>

        <div style="flex: 1;margin-top: -3%;">
          <line-chart :chartData="data" :auto-resize="true" />
        </div>


      </el-row>
    </el-row>
  </div>
</template>

<script>
import cd_png from '@/assets/dashboard/cd.png'
import disk_png from '@/assets/dashboard/disk.png'
import iscsi_png from '@/assets/dashboard/iscsi.png'
import nfs_png from '@/assets/dashboard/nfs.png'
import smb_png from '@/assets/dashboard/smb.png'
import usb_png from '@/assets/dashboard/usb.png'
import LineChart from "@/views/dashboard/LineChart.vue";


export default {
  name: "HardwareItemRoute",
  components: {LineChart},
  props: {
    nameP: {
      type: String,
      default: "UPS",
    },
    infoP: {
      type: String,
      default: "UPS",
    }
  },
  data() {
    return {
      diskType: disk_png,
      color: 0x000000,
      data:{
        data: {
          d: [50, 120, 0.012, 134, 105, 160, 165],
          u: [120, 82, 91, 154, 162, 140, 145]
        },
        x: [1, 2, 3, 4, 5, 6, 7],
        dataTag: [
          {
          name: "上行MB/s",
          tag:  "u",
          color: "#ff003c"
          },
          {
            name: "下行MB/s",
            tag:  "d",
            color: "#0081ff"
          }]
      }
    }
  },
  created() {
    switch (this.diskTypeP) {
      case "cd":
        this.diskType = cd_png;
        break;
      case "disk":
        this.diskType = disk_png;
        break;
      case "iscsi":
        this.diskType = iscsi_png;
        break;
      case "nfs":
        this.diskType = nfs_png;
        break;
      case "smb":
        this.diskType = smb_png;
        break;
      case "usb":
        this.diskType = usb_png;
        break;
    }
  },
  methods: {
    openPage() {
      this.$emit("openWindow")
    },
    refreshDate() {
      //刷新数据
    }
  },
  computed: {},
  filters: {}
}
</script>
<style scoped>

.item-container {


  color: rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  border-radius: 1.4vw;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;


  //position: relative;
  //background: rgba(255, 255, 255);
  //backdrop-filter: blur(12px);
  //-webkit-backdrop-filter: blur(12px);
  //transition: all 0.3s ease;
}


</style>
